<template>
  <div ref="myechart" class="bar"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ProgressChart',
  mounted() {
    let myechart = echarts.init(this.$refs.myechart)
    myechart.setOption({
      xAxis: {
        show: false,
        min:0,
        max:100
      },
      yAxis: {
        show: false,
        // 均分
        type: 'category',
      },
      series: [
        {
          type: 'bar',
          data: [78],
          color: 'yellowgreen',
          // 柱状图宽度
          barWidth:10,
          // 背景颜色设置
          showBackground:true,
          backgroundStyle:{
            color:'#eee'
          },
          label:{
            show:true,
            formatter:'|',
            position:'right'
          }
        },
      ],
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    })
  },
}
</script>

<style >
.bar {
  width: 100%;
  height: 100%;
}
</style>